<template>
  <div>
    <div class="header" style="width: 1200px">
      <el-form
        :inline="true"
        :model="form"
        class="demo-form-inline"
        @submit.native.prevent
      >
        <el-form-item label="景点名称">
          <el-input
            v-model="form.title"
            placeholder="输入电影名称:模糊查询"
            @keyup.native.enter="onSubmit"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        style="height: 40px; margin-right: 100px"
        @click="dialogFormVisible = true"
        >新增景点</el-button
      >
    </div>
    <el-dialog
      title="新增景点"
      :visible.sync="dialogFormVisible"
      destroy-on-close="true"
    >
      <el-form
        class=""
        ref="form"
        :model="form"
        label-width="100px"
        style="width: 600px"
        :rules="rules"
      >
        <el-form-item label="景点名称" prop="title">
          <el-input
            v-model="form.title"
            placeholder="请输入景点名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="景点照片" prop="picture">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:9000/upload"
            :on-success="handleAvatarSuccess"
            :show-file-list="false"
          >
            <img v-if="form.picture" :src="form.picture" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="景点介绍" prop="detail">
          <el-input
            type="textarea"
            v-model="form.detail"
            placeholder="请输入介绍"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
    <el-divider></el-divider>
    <el-table :data="spots">
      <el-table-column label="序号" prop="qid" width="100px"></el-table-column>
      <el-table-column
        label="景点"
        prop="title"
        width="100px"
      ></el-table-column>

      <el-table-column
        label="介绍"
        prop="detail"
        width="600px"
        :show-overflow-tooltip="true"
      >
        <!-- <template slot-scope="scope">
          <el-popover
            placement="top-start"
            title="介绍"
            trigger="hover"
            :content="scope.row.detail"
          >
            <div slot="reference" class="twoLineCls">
              {{ scope.row.detail }}
            </div>
          </el-popover>
        </template> -->
      </el-table-column>
      <el-table-column label="照片">
        <template slot-scope="scope">
          <img :src="scope.row.picture" width="150px" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            title="修改景点"
            size="small"
            type="warning"
            icon="el-icon-edit"
            @click="$router.push(`/home/spot-update/${scope.row.qid}`)"
            circle
          ></el-button>
          <el-button
            title="删除景点"
            size="small"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="delItem(scope.row.qid)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination
      background
      layout="->,prev, pager, next,total,jumper"
      :current-page="this.page"
      :page-size="this.pagesize"
      :total="this.total"
      @current-change="pageChange"
      style="margin-top: 30px"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      keyword: '',
      spots: [],
      page: 1,
      pagesize: 5,
      total: 0,
      form: {
        title: '',
        detail: '',
        picture: '',
      },
      rules: {
        title: [
          { required: true, message: '请填入景点名称', trigger: 'blur' },
          { min: 1, max: 30, message: '字符长度[1-30]', trigger: 'blur' },
        ],
        detail: [
          { required: true, message: '请填入景点介绍', trigger: 'blur' },
          { min: 0, max: 300, message: '字符长度[0-300]', trigger: 'blur' },
        ],
        picture: [{ required: true, message: '请选择图片', trigger: 'blur' }],
      },
    }
  },
  mounted() {
    let params = {
      page: this.page,
      pagesize: this.pagesize,
    }
    this.$http.spotApi.list(params).then(res => {
      console.log(res)
      this.spots = res.data.data
      this.total = res.data.total
    })
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.form.picture = res.data
    },
    pageChange(page) {
      console.log(page)
      let params = { page: page, pagesize: this.pagesize }
      this.$http.spotApi.list(params).then(res => {
        console.log(res)
        this.spots = res.data.data
      })
    },
    submit() {
      console.log(this.form)
      this.$refs['form'].validate(valid => {
        if (valid) {
          // 发送请求，添加新景点到数据库
          this.$http.spotApi.add(this.form).then(res => {
            console.log(res)
            if (res.data.code == 200) {
              this.$message({
                type: 'success',
                message: '新增景点成功',
              })
              this.dialogFormVisible = false
              // 回到上一页
              this.$router.push('/home/spot-list')
            }
          })
        }
      })
    },

    // pageChange(pno) {
    //   // 若用户输入关键字并点击了确定 则模糊查询电影
    //   if (this.keyword) {
    //     let params = {
    //       name: this.keyword,
    //       page: page,
    //       pagesize: this.spots.pagesize,
    //     }
    //     this.$http.spotApi.queryByNameLike(params).then(res => {
    //       console.log('模糊查询的结果', res)
    //       this.spots = res.data
    //     })
    //   } else {
    //     // 查询所有电影
    //     let params = { pno, count: 4 }
    //     this.$http.spotApi.list(params).then(res => {
    //       console.log('加载初始化的电影列表', res)
    //       // 将res.data.data存入this.moviesData
    //       this.spot = res.data
    //     })
    //   }
    // },

    // onSubmit() {
    // 当点击查询按钮后执行
    // 点击搜索后，真正的更新新变量：keyword用于分页时使用
    // this.keyword = this.form.title

    // onSubmit() {
    //   // 当点击查询按钮后执行
    //   // 点击搜索后，真正的更新新变量：keyword用于分页时使用
    //   this.keyword = this.form.title

    //   if (this.form.title.trim()) {
    //     let params = {
    //       name: this.form.title,
    //       pno: this.spots.page,
    //       count: this.spots.pagesize,
    //     }
    //     this.$http.spotApi.queryByNameLike(params).then(res => {
    //       console.log('模糊查询的结果', res)
    //       this.spots = res.data
    //     })
    //   } else {
    //     // 查询所有
    //     let params = { page, pagesize: this.spots.pagesize }
    //     this.$http.spotsApi.list(params).then(res => {
    //       console.log('加载初始化的电影列表', res)
    //       this.spots = res.data
    //     })
    //   }
    // },
    // 模糊查询
    onSubmit() {
      this.keyword = this.form.title
      if (this.form.title) {
        let params = {
          title: this.form.title,
          page: 1,
          pagesize: this.pagesize,
        }
        this.$http.spotApi.mohu(params).then(res => {
          console.log('131', res)
          this.spots = res.data.data
          this.total = res.data.total
        })
      } else {
        let params = {
          page: this.page,
          pagesize: this.pagesize,
        }
        this.$http.spotApi.list(params).then(res => {
          console.log(res)
          this.spots = res.data.data
          this.total = res.data.total
        })
      }
    },
    delItem(qid) {
      console.log(qid)
      console.log('待删除景点的ID：' + qid)
      // 弹出确认删除对话框
      this.$confirm('该操作将永久删除景点，是否继续？', '提示', {
        type: 'warning',
      }).then(() => {
        // 确认删除
        // 发送请求，执行删除操作
        console.log(qid)
        this.$http.spotApi.delete(qid).then(res => {
          // this.$http.noteApi.delete({ sid }).then(res => {
          this.$message({ type: 'success', message: '删除成功' })
          // 刷新当前列表  整理参数发送请求

          // 发送请求，加载攻略列表

          let params = {
            page: this.page,
            pagesize: this.pagesize,
          }
          this.$http.spotApi.list(params).then(res => {
            console.log(res)
            this.spots = res.data.data
            this.total = res.data.total
          })
        })
      })
    },
  },
}
</script>

<style lang="scss">
.el-divider {
  margin: 0 0 24px 0;
}
.header {
  display: flex;
  justify-content: space-between;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}
.avatar {
  width: 200px;
  height: 200px;
  display: block;
}
.twoLineCls {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.el-tooltip__popper {
  max-width: 20%;
}
</style>
